<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">碳排放核算</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="flex align-center justify-between">
				<view class="search-content">
					<image src="https://txr001.zthj.nethttps://txr001.zthj.net/static/img/search.png" class="img-32">
					</image>
					<input v-model="keywords" class="input-class" placeholder="搜索" name="input"></input>
					<image v-if="keywords" @click="closeSearch"
						src="https://txr001.zthj.nethttps://txr001.zthj.net/static/img/searchClose.png"
						class="search-close"></image>
				</view>
			</view>
			<wybDropDown ref="dropDown" :options="options" @change="onHeaderSelect" @select="onItemSelect">
				<view v-if="sel==0">
					<industry></industry>
				</view>
				<view v-if="sel==1">
					<view class="padding-32">
						<view class="sel-two-text">深度</view>
						<view class="padding-top-100 padding-left-sm padding-right-sm">
							<cj-slider v-model="deepValue" :min="0" :max="10" :step="1" :blockWidth="40"
								@end="blockDeepEnd" />
							<!-- <u-slider v-model="value" inactive-color="#24458E" :use-slot="true">
								<view class="">
									<view class="badge-button" :style="[{backgroundImage:'url(/static/img/hkBg.png)'}]">
										{{value}}
									</view>
								</view>
							</u-slider> -->
						</view>
						<view class="padding-32 flex align-center justify-between padding-top-64">
							<button class="cu-btn topResetBtn">重置</button>
							<button class="cu-btn topSureBtn">确认</button>
						</view>
					</view>
				</view>
				<view v-if="sel==2">
					<view class="padding-32">
						<view class="sel-two-text">范围</view>
						<view class="padding-top-32 flex align-center justify-start">
							<view v-for="(fw,index) in fwList" :key="index">
								<view @click="checkFw(fw)" class="margin-right-16"
									:class="fw.check?'selTopFw':'unselTopFw'">{{fw.name}}</view>
							</view>
						</view>
						<view class="padding-32 flex align-center justify-between padding-top-120">
							<button class="cu-btn topResetBtn">重置</button>
							<button class="cu-btn topSureBtn">确认</button>
						</view>
					</view>
				</view>
				<view v-if="sel==3">
					<view class="padding-32">
						<view class="sel-two-text">价格</view>
						<view class="padding-top-100 padding-left-sm padding-right-sm">
							<cj-slider v-model="priceValue" :min="0" :max="1000" :step="100" :blockWidth="40"
								@end="blockPriceEnd" />
						</view>
						<view class="znpx-text">智能排序</view>
						<view class="znpx-sel-text">从高到低</view>
						<view class="znpx-sel-text">从低到高</view>
						<view class="padding-32 flex align-center justify-between padding-top-64">
							<button class="cu-btn topResetBtn">重置</button>
							<button class="cu-btn topSureBtn">确认</button>
						</view>
					</view>
				</view>
			</wybDropDown>
			<view class="account-content" v-for="(item,index) in moxingList" :key="index">
				<view class="flex align-center justify-between">
					<view>
						<view class="title">{{item.title}}</view>
						<view class="desc">模型提供：{{item.provider}}</view>
					</view>
					<view>
						<text class="right-text">查看核算标准</text>
						<image src="https://txr001.zthj.net/static/img/question.png" class="img-32"></image>
					</view>
				</view>
				<view class="padding-top-38 flex align-start justify-start">
					<view>
						<image src="https://txr001.zthj.net/static/img/nyhy.png" class="nyhy-left"></image>
					</view>
					<view class="padding-left-32">
						<view class="name">采集深度: {{item.deep}}</view>
						<view> </view>
						<view class="name padding-top-24">核算范围</view>
						<view class="fw-content flex">
							<view class="flex-sub" :class="item.range==1?'sel':'unsel'">范围1</view>
							<view class="flex-sub" :class="item.range==2?'sel':'unsel'">范围2</view>
							<view class="flex-sub" :class="item.range==3?'sel':'unsel'">范围3</view>
						</view>
						<view class="padding-top-32 flex align-end justify-between">
							<view>
								<text class="num">{{item.price}}</text>
								<text class="text-16 text-666 padding-left-6">数据流量</text>
							</view>
							<view style="float: right;margin-left: 50rpx;" @click="calculate(item)">
								<button class="cu-btn ks-btn">开始核算</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/mxTkBg.png)'}]">
				<view class="padding-32">
					<view class="flex align-center justify-start padding-left-sm">
						<view>
							<image src="https://txr001.zthj.net/static/img/nyhySm.png" class="nyhy-small-img"></image>
						</view>
						<view class="padding-left-24">
							<view class="cu-title">{{modelItem.title}}</view>
							<view class="cu-title-desc padding-top-8">{{modelItem.provider}}</view>
						</view>
					</view>
					<view class="sel-num-content">
						<view class="left-text">选择数量</view>
						<view class="flex align-center justify-center">
							<view @click="reduce">
								<image src="https://txr001.zthj.net/static/img/add.png" class="img-28"></image>
							</view>
							<view class="num-content">{{num}}</view>
							<view @click="add">
								<image src="https://txr001.zthj.net/static/img/add.png" class="img-28"></image>
							</view>
						</view>
					</view>
					<view class="lc-content">
						<view class="cu-steps text-24458E">
							<view class="cu-item " :class="index>selNum?'':''" v-for="(item,index) in numList"
								:key="index">
								<text class="num" :data-index="index + 1"></text> {{item.name}}
							</view>
						</view>
						<view class="lc-title">模型介绍</view>
						<view class="lc-title-desc">
							<u-parse :html="modelItem.desc"></u-parse>

						</view>
					</view>
					<view class="lc-content">
						<view class="flex align-center justify-between padding-bottom-32 solid-bottom">
							<view>
								<text class="text-3333 text-sm">账户数据流量：</text>
							</view>
							<view>
								<text class="text-3333 text-sm text-img-center">{{vuex_user.energy || 0}}</text>
								<image src="https://txr001.zthj.net/static/img/right.png" class="img-32 margin-left-8">
								</image>
							</view>
						</view>
						<view class="flex align-center justify-between padding-top-32 padding-bottom-32 solid-bottom">
							<view>
								<text class="text-3333 text-sm">核算模型价格：</text>
							</view>
							<view>
								<text class="text-24458E text-df">{{modelItem.price*num}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="bottom-conetnt" @click="pay(modelItem.id,modelItem.price*num)">
					<button class="pay-btn cu-btn">立即支付({{modelItem.price*num}}流量)</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue'
	import cjSlider from '@/components/jxs-slider/jxs-slider.vue'
	import industry from './selndustry.vue'
	export default {
		components: {
			wybDropDown,
			cjSlider,industry
		},
		data() {
			return {
				options: [{
					header: '行业',
					// contents在自定义开启时可以不用传
					contents: ['选项1', '选项2', '选项3', '选项4'],
					custom: true // 该栏目开启自定义模式
				}, {
					header: '深度',
					contents: ['选项5', '选项6', '选项7', '选项8'],
					custom: true // 该栏目开启自定义模式
				}, {
					header: '范围',
					contents: ['选项9', '选项10', '选项11', '选项12'],
					custom: true // 该栏目开启自定义模式
				}, {
					header: '价格',
					contents: ['选项9', '选项10', '选项11', '选项12'],
					custom: true // 该栏目开启自定义模式
				}],
				modalName: "",
				num: 1,
				numList: [{
					name: '确认购买'
				}, {
					name: '数据填报'
				}, {
					name: '生成报告'
				}, {
					name: '认证报告'
				}, ],
				selNum: -1,
				moxingList: [],
				keywords: '',
				modelItem: {},
				sel: 0,
				priceValue: 0,
				deepValue:0,
				fwList: [{
						name: "范围一",
						check: true
					},
					{
						name: "范围二",
						check: false
					},
					{
						name: "范围三",
						check: true
					}
				]
			}
		},
		onLoad() {
			this.getMoxing();
		},
		onShow() {
			this.getUserIndex();
		},
		methods: {
			blockDeepEnd() {
				console.log('滑动结束', this.deepValue)
			},
			blockPriceEnd() {
				console.log('滑动结束', this.priceValue)
			},
			onHeaderSelect(e) {
				this.sel = e.headerIndex
				console.log(this.sel)
			},
			checkFw(item) {
				item.check = !item.check
			},
			calculate: function(item) {

				this.modalName = 'bottomModal';
				this.modelItem = item;
				// console.log(price)
			},
			getMoxing: async function() {
				let res = await this.$api.moxing();
				this.moxingList = res;

			},
			toModal() {
				uni.navigateTo({
					url: "/pages/carAccount/carModel"
				})
			},
			add() {
				this.num++
			},
			reduce() {
				if (this.num > 0) {
					this.num--
				}
			},
			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_user', res.data ? res.data.userInfo : {});
				this.callurl = res.data.userInfo.callurl;
				this.time = res.data.userInfo.time;
			},
			async pay(id, money) {
				if (this.vuex_user.money < money) {
					// console.log(111);
					uni.showToast({
						title: '账户数据流量不足，请充值！',
						icon: 'none'
					})
					return false;
				}
				let res = await this.$api.buywenjuan({
					id: id,
					money: money,
					num: this.num
				});
				// console.log(res);
				if (res.code == 1) {
					uni.navigateTo({
						url: "/pages/carAccount/filling?wenjuan_id=" + id
					})
				}

				// uni.showModal({
				// 	title: '',
				// 	content: '您已支付成功',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			uni.navigateTo({
				// 				url: "/pages/carAccount/filling"
				// 			})
				// 		}
				// 	}
				// });
			}

		}

	}
</script>

<style>
	page {
		background: linear-gradient(180deg, rgba(244, 244, 244, 0) 10%, #F4F4F4 19%);
	}
</style>
<style scoped lang="less">
	.search-content {
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 24rpx;
		border: 2rpx solid #D9D9D9;
		display: flex;
		align-content: center;
		justify-content: start;
		align-items: center;
		padding: 0 26rpx;

		.input-class {
			height: 64rpx;
			line-height: 64rpx;
			text-align: left;
			width: 100%;
			padding-left: 24rpx;
		}

		.search-close {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.account-content {
		margin-top: 16rpx;
		background: #F3F7FF;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #24458E;
		}

		.desc {
			padding-top: 8rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
		}

		.right-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #808080;
			vertical-align: middle;
			margin-right: 12rpx;
		}

		.nyhy-left {
			width: 220rpx;
			height: 288rpx;
		}

		.name {
			font-size: 24rpx;
			font-weight: 400;
			color: #808080;
		}

		.fw-content {
			margin-top: 8rpx;
			width: 224rpx;
			height: 36rpx;
			line-height: 36rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
		}

		.sel {
			background: #24458E;
			font-size: 20rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 8rpx;
		}

		.unsel {
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			text-align: center;
		}

		.num {
			font-size: 40rpx;
			font-weight: 600;
			color: #00D282;
		}

		.ks-btn {
			width: 160rpx;
			height: 64rpx;
			background: #24458E;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #F3F7FF;
		}
	}

	.cu-dialog {
		height: 1114rpx;
		border-radius: 48rpx 48rpx 0 0 !important;
		background-size: 100% 100%;
		width: 100%;
		text-align: left;
		// padding: 32rpx;
		overflow-y: scroll;

		.nyhy-small-img {
			width: 100rpx;
			height: 124rpx;
		}

		.cu-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #222222;
		}

		.cu-title-desc {
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;
		}

		.sel-num-content {
			margin-top: 28rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-text {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.num-content {
				width: 82rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #F5F5F5;
				border-radius: 4rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				margin: 0 24rpx;
			}
		}

		.lc-content {
			margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 32rpx;

			.lc-title {
				padding-top: 24rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.lc-title-desc {
				padding-top: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}

			.cu-steps .cu-item:not([class*="text-"]) {
				color: #24458E;
			}
		}

		.bottom-conetnt {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.04);
			padding: 12rpx 32rpx 72rpx;

			.pay-btn {
				width: 100%;
				height: 82rpx;
				background: #00D282;
				border-radius: 49rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.sel-two-text {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.topResetBtn {
		width: 280rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		border: 2rpx solid #999999;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.topSureBtn {
		width: 280rpx;
		height: 68rpx;
		background: #24458E;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.selTopFw {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: #24458E;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-right: 20rpx;
	}

	.unselTopFw {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: #F0F0F0;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-right: 20rpx;
	}
	.znpx-text{
		padding-top: 60rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #24458E;
	}
	.znpx-sel-text{
		padding-top: 24rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #666666;
	}
</style>